<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <script src="/public/config.js"></script>
    <title>Vite App</title>
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script
      type="module"
      src="/src/main.ts"></script>
    <script>
      function setScreen() {
        let basicWidth = 1920;
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
        let basicHeight = (basicWidth / width) * height;
        let num = width / basicWidth;
        let body = document.getElementById('app');
        body.style.width = basicWidth + 'px';
        body.style.height = basicHeight + 'px';
        body.style.transform = `scale(${num})`;
        body.style.transformOrigin = `left top`;
        // document.getElementsByTagName('body')[0].style.zoom = num
        document.getElementsByTagName('body')[0].style.setProperty('--scale', 1 / num);
        document.getElementsByTagName('body')[0].style.setProperty('--reScale', num);
      }

      window.onresize = setScreen;
      setScreen();
    </script>
  </body>
</html>
